<template>
	<view class="shop_order">
		<u-navbar title="订单信息" @leftClick="leftClick">
		</u-navbar>

		<view class="order_main">
			<view class="addr">
				<image class="addr_img" src="../../static/img/order-bg.png" mode=""></image>
				<view class="user_msg" @click="jumpAddr">
					<view class="msg_main" v-show="addFlat">
						<text class="uname">{{uname+" "}}</text>
						<text class="phone">{{" "+uphone}}</text>
						<view class="user_addr">
							<u-tag text="默认" v-show="uflat" class="btn" plain size="mini" type="warning"></u-tag>
							{{uaddr}}
						</view>
					</view>
					<view class="msg_main2" v-show="!addFlat">
						+ 选择地址
					</view>
					<u-icon name="arrow-right"></u-icon>

				</view>
			</view>

			<view class="shop_list">
				<view class="shop_tab" :class="index+1==orderList.length?'spex':''" v-for="(item,index) in orderList">
					<view class="tab_con">
						<view class="con_img">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="con_center">
							<view class="cctop">
								{{item.item_shops}}
							</view>
							<view class="ccmid">
								{{item.title}}
							</view>
							<view class="ccbot">
								<!-- ￥ -->
								{{item.price*item.count}}
							</view>
						</view>
						<view class="con_right">
							商品数量:{{item.count}}
						</view>
					</view>
				</view>

				<!-- <view class="shop_tab">
					<view class="tab_con">
						<view class="con_img">

						</view>
						<view class="con_center">
							<view class="cctop">
								天青色等烟雨
							</view>
							<view class="ccmid">
								天青色等烟雨
							</view>
							<view class="ccbot">
								￥333
							</view>
						</view>
						<view class="con_right">
							商品数量:6
						</view>
					</view>
				</view>
 -->
				<!-- <view class="shop_tab spex">
					<view class="tab_con">
						<view class="con_img">

						</view>
						<view class="con_center">
							<view class="cctop">
								天青色等烟雨
							</view>
							<view class="ccmid">
								天青色等烟雨
							</view>
							<view class="ccbot">
								￥333
							</view>
						</view>
						<view class="con_right">
							商品数量:6
						</view>
					</view>
				</view>
				 -->
				<view class="all_count">
					<text>共{{orderList.length}}件商品</text>
					<text>小计 : </text>
					<text>{{allMoney}}</text>
				</view>
			</view>
			<view class="order_con1">
				<view class="con1_list">
					<view class="con1_tab">
						<text class="tab_left">配送方式</text>
						<text class="tab_right">全场包邮</text>
					</view>
					<view class="con1_tab">
						<text class="tab_left">运费</text>
						<text class="tab_right pink">0</text>
					</view>
				</view>
			</view>
			<view class="order_con2">
				<view class="con2_list">
					<view class="con2_tab">
						<text class="tab_left">订单金额</text>
						<text class="tab_right ">￥{{allMoney}}</text>
					</view>
					<view class="con2_tab">
						<text class="tab_left">运费</text>
						<text class="tab_right ">￥0</text>
					</view>

				</view>
			</view>
			<view class="go_shop">
				<view class="all_price">
					需支付: <text>￥{{allMoney}}</text>
				</view>
				<view class="shop_btn" @click="pay">
					去支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				allMoney: 0,
				uname: "张三",
				uphone: "188888888",
				uaddr: "大撒大撒我去是大飒飒",
				addFlat: false,
				uflat: false,
				aid: 0
			};
		},
		onLoad() {
			// console.log(uni.getStorageSync("a_id"), 132123)
			uni.removeStorageSync("a_id")
			console.log(123)
		},
		onShow() {
			if (!uni.getStorageSync("a_id")) {

			}
			uni.showLoading({
				title: "加载中..."
			})
			let dd = uni.getStorageSync("shop_id")
			uniCloud.callFunction({
				name: "order_shop",
				data: {
					_id: dd
				}
			}).then((res) => {
				this.orderList = res.result
				console.log(res.result)
				let dd = 0;

				for (let i = 0; i < this.orderList.length; i++) {
					dd = dd + (this.orderList[i].price * this.orderList[i].count)
				}
				this.allMoney = dd
			}).then(() => {
				uniCloud.callFunction({
					name: "user_addrs",
					data: {
						uid: uni.getStorageSync("_id")
					}
				}).then((res) => {
					console.log(res.result.data, " 1.1")
					if (res.result.data.length == 0) {
						this.addFlat = false
					} else {
						this.addFlat = true
						let rflat = res.result.data.findIndex(item => {
							return item.aflat == true
						})
						if (rflat == -1 && !uni.getStorageSync("a_id")) {
							uni.setStorageSync("a_id", 0)
							this.aid = uni.getStorageSync("a_id")
							// this.uname = res.result.data[this.aid].aname
							// this.uphone = res.result.data[this.aid].aphone
							// this.uaddr = res.result.data[this.aid].aaddr1 + res.result.data[this.aid].aaddr2
							// this.uflat = res.result.data[this.aid].aflat
							// console.log(res.result.data[this.aid].aflat, 456456)
						} else if (uni.getStorageSync("a_id")) {
							// uni.setStorageSync("a_id", 0)
							this.aid = uni.getStorageSync("a_id")
							// this.uname = res.result.data[this.aid].aname
							// this.uphone = res.result.data[this.aid].aphone
							// this.uaddr = res.result.data[this.aid].aaddr1 + res.result.data[this.aid].aaddr2
							// this.uflat = res.result.data[this.aid].aflat
							// console.log(res.result.data[this.aid].aflat, 456456)
						} else if (rflat > 0 && !uni.getStorageSync("a_id")) {
							// this.uname = res.result.data[rflat].aname
							// this.uphone = res.result.data[rflat].aphone
							// this.uaddr = res.result.data[rflat].aaddr1 + res.result.data[rflat].aaddr2
							// this.uflat = res.result.data[rflat].aflat
							// console.log(res.result.data[rflat].aflat, 456456)
							this.aid = rflat
						}
						this.uname = res.result.data[this.aid].aname
						this.uphone = res.result.data[this.aid].aphone
						this.uaddr = res.result.data[this.aid].aaddr1 + res.result.data[this.aid].aaddr2
						this.uflat = res.result.data[this.aid].aflat
						console.log(res.result.data[this.aid].aflat, 456456)
						uni.hideLoading()
					}
				})
			})
		},
		methods: {
			leftClick() {
				// console.log('rightClick');
				uni.showModal({
					title: '提示',
					content: '确定离开支付页？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#333',
					success: (res) => {
						uni.navigateBack({
							delta: 1
						})

					}
				})

			},

			jumpAddr() {
				// console.log(123)
				uni.navigateTo({
					url: "/pages/address/address"
				})
			},
			pay() {
				console.log(123)
				uni.showModal({
					title: '提示',
					content: '确定支付吗？',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "确认", // 确认按钮的文字
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#333',
					success: (res) => {
						if (res.confirm) {
							console.log("confirm")
							uni.showLoading({
								title: "支付中"
							});
							// uniCloud.callFunction({
							// 	name:
							// })
							let dd = []
							for (let i = 0; i < this.orderList.length; i++) {
								console.log(this.orderList[i])
								dd.push(this.orderList[i]._id)
							};
							uniCloud.callFunction({
								name: "user_end_shop",
								data: {
									_id: dd,
									uname: this.uname,
									uphone: this.uphone,
									uaddr: this.uaddr

								}
							}).then(res => {
								uni.showToast({
									title: "支付成功"
								})
								uni.navigateBack({
									delta: 1
								})
								console.log(res)
							})

						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.all_price {
		text {
			color: #ff78a2;
		}
	}

	.msg_main2 {}

	.go_shop {
		height: 50px;
		margin-top: 10px;
		background-color: white;
		display: flex;
		padding-left: 20px;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;

		.shop_btn {
			width: 100px;
			text-align: center;
			background-color: #ff78a2;
			height: 100%;
			line-height: 50px;
			color: white;
		}
	}

	.order_con2 {
		width: 100%;
		height: 80px;
		margin-top: 10px;
		background-color: white;

		.con2_list {
			padding: 18px 20px;

			.con2_tab {
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 100;

				.tab_right {
					margin-top: 4px;
					color: #999;
				}
			}
		}
	}

	.pink {
		color: #ff78a2;

		&::before {
			content: "￥";
			font-size: 12px;
		}
	}

	.order_con1 {
		height: 216rpx;
		margin-top: 10px;
		width: 100%;
		background-color: white;

		.con1_list {
			margin: 0 20px;

			.con1_tab {
				width: 100%;
				border-bottom: 1px solid whitesmoke;
				padding: 18px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				box-sizing: border-box;
			}
		}
	}

	.all_count {
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 20px;

		text {
			margin-right: 10px;

			&:nth-child(2) {
				margin-right: 5px;
			}

			&:last-child {
				color: #ff78a2;

				&::before {
					content: "￥";
					font-size: 12px;
				}
			}
		}
	}

	.spex {
		padding-bottom: 20px;
		border-bottom: 1px solid whitesmoke;
	}

	.shop_order {
		background-color: #f2f3f3;
		color: #333;
		min-height: 100vh;
	}

	.order_main {
		margin-top: 54px;
		width: 100%;
		background-color: whitesmoke;

		.addr {
			// height: 216rpx;
			width: 750rpx;
			background-color: white;
			padding-bottom: 20rpx;
		}

		.addr_img {
			height: 4px;
			width: 100%;
			transform: translateY(-12px);
		}

		.shop_list {
			background-color: white;

			padding-bottom: 16px;

			.shop_tab {
				height: 184rpx;
				margin: 10px 20px;

				.tab_con {
					height: 100%;
					width: 100%;
					display: flex;

					.con_img {
						background-color: whitesmoke;
						height: 184rpx;
						width: 184rpx;
						border-radius: 12px;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}

					}

					.con_center {
						margin-left: 10px;
						height: 184rpx;
						width: 290rpx;

						.cctop {
							margin-top: 4px;
							font-size: 16px;
						}

						.ccmid {
							margin-top: 6px;
							font-size: 13px;
							color: #999;
							font-weight: 100;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}

						.ccbot {
							margin-top: 20px;
							font-size: 14px;
							color: #ff78a2;

							&::before {
								content: "￥";
								margin-right: -2px;
								font-size: 12px;
								color: #ff78a2;
							}
						}
					}

					.con_right {
						margin-left: 10px;
						height: 176rpx;
						width: 150rpx;
						font-size: 13px;
						display: flex;
						align-items: flex-end;

					}
				}

				&:first-child {
					padding-top: 20px;
				}



			}
		}

		.user_msg {
			margin: 0 20px;
			// height: 80px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transform: translateY(-4px);
		}

		.uname,
		.phone {
			font-size: 20px;
		}

		.btn {
			display: inline-block;
			margin-right: 4px;
		}

		.user_addr {
			font-size: 14px;
			width: 230px;
			margin-top: 10px;
		}
	}
</style>